<template>
  <div class="list">
    <div class="head">
      <div class="id">订单ID</div>
      <div class="price">订单金额</div>
      <div class="status">订单状态</div>
      <div class="handle">操作</div>
    </div>
    <div v-for="(item, index) in orderList" :key="index" class="user">
      <div class="up">
        <!-- <i class="el-icon-arrow-down" @click="isClick(index)"></i> -->
        <div class="icon">
          <i
            class="el-icon-arrow-down"
            v-if="look[index].show"
            @click="isClick(index)"
          ></i>
          <i class="el-icon-arrow-right" v-else @click="isClick(index)"></i>
        </div>
        <div class="info">
          <div class="id">{{ item.order.id }}</div>
          <div class="price">{{ item.order.price }}</div>
          <div class="status">
            <el-tag v-if="item.order.status == 0">等待支付</el-tag>
            <el-tag type="info" v-if="item.order.status == 1">支付失败</el-tag>
            <el-tag type="success" v-if="item.order.status == 2"
              >支付成功</el-tag
            >
            <el-tag type="warning" v-if="item.order.status == 3"
              >已被撤销</el-tag
            >
          </div>
          <div class="cxdd">
            <el-button type="warning" plain>撤销订单</el-button>
          </div>
          <div class="sbyc">
            <el-button type="danger" plain>上报异常</el-button>
          </div>
        </div>
      </div>
      <div class="down" v-show="look[index].show">
        <!--  -->
        <div class="left">
          <div>订单ID：{{ item.order.id }}</div>
          <div>用户ID：{{ item.order.uid }}</div>
          <div>电影ID：{{ item.arrangement.fid }}</div>
          <div>场次ID：{{ item.order.aid }}</div>
        </div>
        <div class="right">
          <div>电影名：{{ item.arrangement.name }}</div>
          <div>座位号：{{ item.order.seats }}</div>
          <div>订单金额：{{ item.order.price }}</div>
          <div>下单时间：{{ item.order.createTime }}</div>
          <div>支付时间：{{ item.order.createTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { OrderList } from "@/api/manager";
export default {
  data() {
    return {
      orderList: {},
      look: [],
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    // 获取电影列表
    getOrderList() {
      OrderList().then((res) => {
        res.msg = "orderList";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].order.createTime = this.formatDate1(
            res.data[i].order.createTime
          );
          res.data[i].order.updateTime = this.formatDate1(
            res.data[i].order.updateTime
          );
          this.look.push(Object.assign({}, i, { show: false }));
        }
        console.log(res);

        this.orderList = res.data;
      });
    },

    isClick(index) {
      this.look[index].show = !this.look[index].show;
    },

    // 日期格式化
    formatDate1(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
    // 日期格式化 年月日
    formatDate2(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.list {
  width: 1100px;
  height: 850px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  .head {
    border-bottom: 1px solid #000;
    position: relative;
    height: 50px;
    div {
      font-size: 20px;
      float: left;
      color: rgb(85, 85, 85);
      font-weight: bold;
      padding-top: 15px;
    }
    .id {
      position: absolute;
      left: 50px;
      width: 80px;
    }
    .price {
      position: absolute;
      left: 200px;
    }
    .status {
      position: absolute;
      left: 450px;
    }
    .handle {
      position: absolute;
      left: 750px;
    }
  }
  .user {
    width: 1100px;
    height: auto;
    float: left;
    // border-bottom: 1px solid #000;
    .up {
      width: 1100px;
      height: 50px;
      border-bottom: 1px solid #000;
      .icon {
        cursor: pointer;
        float: left;
        padding: 13px 15px;
      }
      .info {
        position: relative;
        div {
          float: left;
          padding: 12px 0;
        }
        .id {
          position: absolute;
          left: 75px;
          width: 80px;
        }
        .price {
          position: absolute;
          left: 200px;
        }
        .status {
          position: absolute;
          left: 450px;
          padding: 5px 0;
          * {
            width: 100px;
            height: 40px;
            font-size: 14px;
            text-align: center;
            padding: 3px 0;
          }
        }
        .cxdd {
          position: absolute;
          left: 750px;
          padding: 5px 0;
        }
        .sbyc {
          position: absolute;
          left: 850px;
          padding: 5px 0;
        }
      }
    }
    .down {
      width: 1100px;
      height: 220px;
      border-bottom: 1px solid #000;
      .left {
        position: absolute;
        left: 50px;
        float: left;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
      }
      .right {
        float: left;
        position: absolute;
        left: 500px;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
      }
    }
  }
}
</style>